
  
<script setup>
  import { ref, onMounted } from 'vue'

  const show = defineModel('show')

  const showHandle = () => {
    show.value = false;
  }

</script>

<template>
    <div class="cover" @click="showHandle" v-show="show" >
      <div class="help-view" @click.stop="">
        <IconSvg name="closure"  @click="showHandle" class="icon-closure" />
        <div class="help-content">
          <div class="help-content-list">
            <h2>好用便签</h2>
            <div class="help-content-item">
              <p>拖动至屏幕边缘可自动隐藏</p>
            </div>
          </div>
          <div class="help-content-list">
            <h2>闹钟:</h2>
            <div class="help-content-item">
              <p>自定义重复:例 135,则周一三五触发该闹钟</p>
              <p>esc 键可快速关闭弹窗</p>
              <p>ctl键可多选上传图片（多选图片将进行轮播展示）</p>
            </div>
          </div>
          <div class="help-content-list">
            <h2>图片:</h2>
            <div class="help-content-item">
              <p>ctl键可多选上传图片</p>
            </div>
          </div>
          <div class="help-content-list">
            <h2>天气:</h2>
            <div class="help-content-item">
              <p>可通过滚轮查看近七天天气。</p>
              <p>点击天气挂件可在浏览器查看详情。</p>
              注：天气挂件30分钟更新一次。天气挂件在后台（没有在桌面显示或被覆盖）的情况下不会更新，当天气组=挂件显示在桌面时更新数据。
            </div>
          </div>
          <div class="help-content-list">
            <h2>快捷启动:</h2>
            <div class="help-content-item">
              <p>可直接拖动图标进入挂件。</p>
            </div>
          </div>
          <div class="help-content-list">
            <h2>木鱼:</h2>
            <div class="help-content-item">
              <p>当聚焦木鱼挂件后可通过 “空格”、“回车”键敲击木鱼</p>
            </div>
          </div>
          <div class="help-content-list">
            <h2>倒计时:</h2>
            <div class="help-content-item">
              <p>tab键可快速切换聚焦，回车键计时</p>
            </div>
          </div>
          <div class="help-content-list">
            <h2>注:</h2>
            <div class="help-content-item">
              <p>当主屏幕与副屏幕缩放倍率不同，在第二次打开挂件时会与历史尺寸出现偏差。(已修复)</p>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<style lang="scss" scoped>
  .cover{
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.1);
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    justify-content: center;
    align-items: center;


    .help-view{
      position: relative;
      width: 60%;
      height: 80vh;
      background-color: var(--bg-color);
      border-radius: 10px;
      padding: 20px;
      color: #777980;
      overflow: hidden;
      box-shadow: 0 0 10px var(--shadow-color);


      .icon-closure{
        position: absolute;
        top: 10px;
        right: 10px;
        cursor: pointer;
        color: var(--font-color);
      }

      .help-content{
        width: 100%;
        height: 100%;
        overflow-y: auto;
        .help-content-list{
          & ~ .help-content-list{
            margin-top: 15px;
          }
        }
        
      }
      
    }
  }
</style>